<style>
    .video-actions {
        padding: 15px;
        background: #fff;
        border-radius: 8px;
        margin: 10px 0;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .action-button {
        display: inline-flex;
        align-items: center;
        padding: 8px 15px;
        border-radius: 20px;
        background: #f5f5f5;
        border: none;
        cursor: pointer;
        transition: all 0.3s;
        color: #666;
    }

    .action-button:hover {
        background: #e5e5e5;
    }

    .action-button.active {
        background: #ff6b6b;
        color: #fff;
    }

    .action-button i {
        font-size: 18px;
        margin-right: 5px;
    }

    /* 移动端适配 */
    @media screen and (max-width: 767px) {
        .video-actions {
            padding: 10px;
        }

        .action-button {
            padding: 6px 12px;
        }
    }

    /* 优化表单样式 */
    .record-form {
        padding: 20px;
    }

    .record-form .form-group {
        margin-bottom: 15px;
    }

    .record-form .form-label {
        display: block;
        margin-bottom: 8px;
        color: #333;
        font-weight: 500;
    }

    .record-form .form-tip {
        font-size: 12px;
        color: #999;
        margin-top: 4px;
    }

    .record-form input {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        font-size: 14px;
        transition: all 0.3s;
    }

    .record-form input:focus {
        border-color: #1E9FFF;
        box-shadow: 0 0 0 2px rgba(30, 159, 255, 0.1);
        outline: none;
    }

    .record-form input:read-only {
        background-color: #f5f5f5;
        cursor: not-allowed;
    }

    .record-form .error-text {
        color: #ff4d4f;
        font-size: 12px;
        margin-top: 5px;
    }

    /* 添加必填标记样式 */
    .required::after {
        content: '*';
        color: #ff4d4f;
        margin-left: 4px;
    }
</style>

<div class="video-actions">
    <button class="action-button" onclick="recordBtn()">
        <i class="layui-icon layui-icon-praise"></i>
        <span>记录</span>
    </button>
</div>

<script>
    // 记录按钮
    async function recordBtn() {
        // 加载loading
        var loadIndex = layer.load(2);
        
        const urlParams = new URLSearchParams(window.location.search);
        const articleUrl = urlParams.get('article_url');
        // 获取现有记录
        let records = JSON.parse(localStorage.getItem(localStorageKey) || '[]');
        // 检查是否已存在相同记录
        const exists = records.some(record => record.url === articleUrl);
        if (exists) {
            layer.close(loadIndex)

            layer.msg('该文章已在收藏列表中', {
                icon: 0,
                time: 2000
            });
            return;
        }
        try {
            // 获取文章详情

            const response = await axios.get(`api/scraper/hei_liao/${window.location.pathname.split('/')[2]}/get_article_detail/`, {
                params: { article_url: articleUrl }
            });
            layer.close(loadIndex)

            if (response.data.code === 0) {
                const articleData = response.data.data;
                // 当前线路
                let line = window.location.pathname.split('/')[2];
                // 打开记录表单
                layer.open({
                    type: 1,
                    title: '添加收藏记录 当前线路：' + line,
                    area: ['400px', 'auto'],
                    content: `
                        <div class="record-form">
                            <div class="form-group">
                                <label class="form-label required">标题</label>
                                <input type="text" 
                                       id="recordTitle" 
                                       placeholder="请输入标题" 
                                       value="${articleData.title || ''}" 
                                       class="layui-input">
                                <div class="form-tip">建议输入简短、易记的标题</div>
                            </div>
                            <div class="form-group">
                                <label class="form-label">文章链接</label>
                                <input type="text" 
                                       id="recordUrl" 
                                       value="${articleUrl || ''}" 
                                       class="layui-input" 
                                       readonly>
                                <div class="form-tip">系统自动获取的文章链接</div>
                            </div>
                            <div class="form-group">
                                <label class="form-label required">封面图片</label>
                                <input type="text" 
                                       id="recordCover" 
                                       placeholder="请输入封面图片链接" 
                                       value="${articleData.detail_imgs?.[0] || ''}" 
                                       class="layui-input">
                                <div class="form-tip">系统已自动选择第一张图片作为封面，您也可以修改为其他图片链接</div>
                            </div>
                            <div class="form-tip" style="margin-top: 15px; color: #666;">
                                <i class="layui-icon layui-icon-about" style="font-size: 14px;"></i>
                                标记 * 的为必填项，记录将保存在本地中
                            </div>
                        </div>
                    `,
                    btn: ['确定保存', '取消'],
                    btnAlign: 'c',
                    yes: function (index) {
                        saveRecord(index);
                    }
                });
            } else {
                layer.msg('获取文章信息失败', { icon: 2 });
            }
        } catch (error) {
            layer.close(loadIndex)

            layer.msg('操作失败：' + error.message, { icon: 2 });
        }
    }

    // 保存记录
    function saveRecord(layerIndex) {
        const title = document.getElementById('recordTitle').value.trim();
        const url = document.getElementById('recordUrl').value.trim();
        const cover = document.getElementById('recordCover').value.trim();

        if (!title || !url || !cover) {
            layer.msg('请填写所有必填项', { icon: 2 });
            return;
        }

        // 获取现有记录
        let records = JSON.parse(localStorage.getItem(localStorageKey) || '[]');

        // 检查是否已存在相同记录
        const exists = records.some(record => record.url === url);
        if (exists) {
            layer.msg('该文章已在收藏列表中', {
                icon: 0,
                time: 2000
            });
            return;
        }

        // 添加新记录
        const newRecord = {
            title,
            url,
            cover,
            timestamp: new Date().toISOString(),
            line: window.location.pathname.split('/')[2]
        };

        records.push(newRecord);

        // 保存到localStorage
        try {
            localStorage.setItem(localStorageKey, JSON.stringify(records));
            layer.msg('收藏成功', {
                icon: 1,
                time: 1500
            });
            layer.close(layerIndex);
        } catch (error) {
            if (error.name === 'QuotaExceededError') {
                layer.msg('本地存储空间已满，请清理部分记录后重试', {
                    icon: 2,
                    time: 3000
                });
            } else {
                layer.msg('保存失败：' + error.message, {
                    icon: 2,
                    time: 2000
                });
            }
        }
    }
</script>